import React, { useEffect, useState } from 'react'
import cls from 'classnames'
import './index.scss'
import { View } from '@tarojs/components'


const getClassNames = (name: string) => ({
    enter: `xxm-ls-${name}-enter xxm-ls-${name}-enter-active enter-class enter-active-class`,
    'enter-to': `xxm-ls-${name}-enter-to xxm-ls-${name}-enter-active enter-to-class enter-active-class`,
    leave: `xxm-ls-${name}-leave xxm-ls-${name}-leave-active leave-class leave-active-class`,
    'leave-to': `xxm-ls-${name}-leave-to xxm-ls-${name}-leave-active leave-to-class leave-active-class`,
});

export interface ITransitionProps {
    visible?: boolean
    duration?: number
    name?: string
    customClass?: string
    csutomStyle? :React.CSSProperties
    onClick?: ()=> void

}


const nextTick = () => new Promise((resolve) => setTimeout(resolve, 1000 / 30));

export const Transition: React.FC<ITransitionProps> = ({
    visible = true,
    duration = 300,
    name = 'fade',
    children,
    customClass,
    csutomStyle,
    onClick
}) => {

    const [display, setDisplay] = useState<string>('none')
    const [classNames, setClassNames] = useState<string>()
    const [inited, setInited] = useState<boolean>(false)
    // const []

    // let status = ''

    // const checkStatus = (status: 'enter' | 'leave') =>{
    //     if (status !== this.status) {
    //       throw new Error(`incongruent status: ${status}`);
    //     }
    // }
    let transitionEnd

    const transition = () => {
        if (transitionEnd) {
            return;
        }
        transitionEnd = true;
        if (!visible && display === 'block') {
            setDisplay('none')
        }
    }
    
    const enter = () => {
        // const { duration, name } = this.data;
        const classNames = getClassNames(name);
        // status = 'enter'

        Promise.resolve()
            .then(nextTick)
            .then(() => {
                setInited(true)
                setClassNames(classNames.enter)
                setDisplay('block')

            })
            .then(nextTick)
            .then(() => {
                transitionEnd = false
                setClassNames(classNames["enter-to"])
            })
            .catch(() => { });


    }

    const leave = () => {

        if (display === 'none') {
            return;
        }
        const classNames = getClassNames(name);
        // status = 'leave';
        Promise.resolve()
            .then(nextTick)
            .then(() => {
                //   this.checkStatus('leave');
                //   this.$emit('leave');

                setClassNames(classNames.leave)
                setDisplay('none')

            })
            .then(nextTick)
            .then(() => {
                transitionEnd = false
                setTimeout(() => transition(), duration);
                setClassNames(classNames["leave-to"])
            })
            .catch(() => { });
    }
    useEffect(() => {
        visible ? enter() : leave()
    }, [visible])



    return (
        inited ? <View
            className={
                cls('xxm-ls-transition',
                    customClass,
                    classNames
                )
            }
            onClick={(e)=>{
                // e.preventDefault()
                e.stopPropagation()
                if(onClick){
                    onClick()
                }
            }}
            style={{
                WebkitTransitionDuration: `${duration}ms`,
                transitionDuration: `${duration}ms`,
                display,
                ...csutomStyle
            }}
            onTransitionEnd={transition}
        >
            {children}
        </View> : null
    )
}